<template>
  <!-- 普通用户进场动画 -->
  <transition enter-active-class="slideInRight faster animated" leave-active-class="slideOutLeft faster animated">
    <div class="commonWrap publicVCenter" v-show="showAniStart">
      <img src="@/assets/image/hd2/touXiang.png" class="touXiangIcon" />
      欢迎 {{nameDisplay}} 进入互动
    </div>
  </transition>
</template>
<script>
import { timeoutTask } from '@/utils/index';

export default {
  name: 'commonEffect',
  data() {
    return {
      name: '',
      headImg: '',
      time: 3,
      showAniStart: false,
      Observer: null,
    };
  },
  computed: {
    nameDisplay() {
      return this.name.length > 3 ? `${this.name.slice(0, 3)}...` : this.name;
    },
  },
  watch: {},
  beforeDestroy() {
  },
  mounted() {
    this.showAniStart = true;
    timeoutTask(() => {
      this.showAniStart = false;
      this.Observer.ended = true;
    }, parseFloat(this.time, 10) * 1000);
  },
  methods: {
  },
};
</script>
<style lang="less" scoped>
.commonWrap {
  position: absolute;
  left: 30px;
  top: 250px;
  width: 444px;
  height: 64px;
  background-image: url('../../assets/image/hdBar/commonEnterBg.png');
  background-size: 100% 100%;
  border-radius: 30px;
  padding: 0 26px;
  font-size: 22px;
  font-weight: 300;
  color: #ffffff;
  .touXiangIcon {
    width: 32px;
    height: 32px;
    margin-right: 16px;
  }
}
</style>
